<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标签参考指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        h2 {
            font-size: 1.8rem;
            margin: 30px 0 20px 0;
            color: #4CAF50;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
        }
        h3 {
            font-size: 1.4rem;
            margin: 20px 0 15px 0;
            color: #388E3C;
        }
        p {
            margin-bottom: 15px;
            font-size: 1.05rem;
        }
        pre {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 15px 0;
            border-left: 4px solid #4CAF50;
        }
        code {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f8f8f8;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .tag-example {
            margin: 20px 0;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
            border-left: 4px solid #2196F3;
        }
        .tag-name {
            font-weight: bold;
            color: #D32F2F;
        }
        .tag-category {
            display: inline-block;
            background-color: #E3F2FD;
            color: #1976D2;
            padding: 5px 10px;
            border-radius: 20px;
            margin: 5px 5px 5px 0;
            font-size: 0.9rem;
        }
        .example-output {
            margin-top: 10px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        ul, ol {
            margin-left: 25px;
            margin-bottom: 15px;
        }
        li {
            margin-bottom: 8px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .nav {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
        }
        .nav a {
            color: #333;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ddd;
            transition: all 0.3s ease;
        }
        .nav a:hover {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 20px;
            transition: background-color 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        .back-to-top:hover {
            background-color: #388E3C;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML标签参考指南</h1>
            <p>全面了解HTML5的所有标签及其用法</p>
        </header>

        <div class="nav">
            <a href="#basic-structure">基本结构标签</a>
            <a href="#text-tags">文本标签</a>
            <a href="#link-tags">链接与导航标签</a>
            <a href="#list-tags">列表标签</a>
            <a href="#table-tags">表格标签</a>
            <a href="#form-tags">表单标签</a>
            <a href="#media-tags">媒体标签</a>
            <a href="#semantic-tags">语义化标签</a>
            <a href="#embedded-tags">内嵌内容标签</a>
            <a href="#meta-tags">元信息标签</a>
        </div>

        <section id="basic-structure">
            <h2>基本结构标签</h2>
            <p>这些标签构成了HTML文档的基本框架结构。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;!DOCTYPE html&gt;</span></h3>
                <p>文档类型声明，告诉浏览器这是一个HTML5文档。</p>
                <pre><code>&lt;!DOCTYPE html&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;html&gt;</span></h3>
                <p>HTML文档的根元素，包含了整个HTML页面的内容。</p>
                <pre><code>&lt;html lang="zh-CN"&gt;
    <!-- HTML内容 -->
&lt;/html&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;head&gt;</span></h3>
                <p>包含了文档的元数据，如标题、字符集、样式等。</p>
                <pre><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;body&gt;</span></h3>
                <p>包含了HTML文档的可见内容，如文本、图像、链接等。</p>
                <pre><code>&lt;body&gt;
    &lt;h1&gt;页面标题&lt;/h1&gt;
    &lt;p&gt;页面内容&lt;/p&gt;
&lt;/body&gt;</code></pre>
            </div>
        </section>

        <section id="text-tags">
            <h2>文本标签</h2>
            <p>用于组织和格式化页面上的文本内容。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;h1&gt; 至 &lt;h6&gt;</span></h3>
                <p>标题标签，用于表示不同级别的标题，&lt;h1&gt;级别最高，&lt;h6&gt;级别最低。</p>
                <pre><code>&lt;h1&gt;一级标题&lt;/h1&gt;
&lt;h2&gt;二级标题&lt;/h2&gt;
&lt;h3&gt;三级标题&lt;/h3&gt;
&lt;h4&gt;四级标题&lt;/h4&gt;
&lt;h5&gt;五级标题&lt;/h5&gt;
&lt;h6&gt;六级标题&lt;/h6&gt;</code></pre>
                <div class="example-output">
                    <h1>一级标题</h1>
                    <h2>二级标题</h2>
                    <h3>三级标题</h3>
                    <h4>四级标题</h4>
                    <h5>五级标题</h5>
                    <h6>六级标题</h6>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;p&gt;</span></h3>
                <p>段落标签，用于表示一个段落。</p>
                <pre><code>&lt;p&gt;这是一个段落文本，用于展示HTML中的段落标签用法。&lt;/p&gt;</code></pre>
                <div class="example-output">
                    <p>这是一个段落文本，用于展示HTML中的段落标签用法。</p>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;br&gt;</span></h3>
                <p>换行标签，用于在文本中插入一个换行符。</p>
                <pre><code>&lt;p&gt;第一行文本&lt;br&gt;第二行文本&lt;/p&gt;</code></pre>
                <div class="example-output">
                    <p>第一行文本<br>第二行文本</p>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;hr&gt;</span></h3>
                <p>水平线标签，用于在页面中插入一条水平线。</p>
                <pre><code>&lt;p&gt;上方内容&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;下方内容&lt;/p&gt;</code></pre>
                <div class="example-output">
                    <p>上方内容</p>
                    <hr>
                    <p>下方内容</p>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;strong&gt;</span> 和 <span class="tag-name">&lt;em&gt;</span></h3>
                <p>强调标签，&lt;strong&gt;表示重要性（粗体），&lt;em&gt;表示强调（斜体）。</p>
                <pre><code>&lt;p&gt;这是&lt;strong&gt;重要的&lt;/strong&gt;文本，这是&lt;em&gt;强调的&lt;/em&gt;文本。&lt;/p&gt;</code></pre>
                <div class="example-output">
                    <p>这是<strong>重要的</strong>文本，这是<em>强调的</em>文本。</p>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;span&gt;</span> 和 <span class="tag-name">&lt;div&gt;</span></h3>
                <p>容器标签，&lt;span&gt;用于行内元素，&lt;div&gt;用于块级元素。</p>
                <pre><code>&lt;div&gt;这是一个块级容器&lt;/div&gt;
&lt;p&gt;这是一个段落，其中包含&lt;span style="color:red"&gt;红色&lt;/span&gt;文本。&lt;/p&gt;</code></pre>
                <div class="example-output">
                    <div>这是一个块级容器</div>
                    <p>这是一个段落，其中包含<span style="color:red">红色</span>文本。</p>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;blockquote&gt;</span></h3>
                <p>引用标签，用于表示一段引用的内容。</p>
                <pre><code>&lt;blockquote cite="https://example.com"&gt;
    这是一段引用的内容，通常用于引用他人的话语或文章片段。
&lt;/blockquote&gt;</code></pre>
                <div class="example-output">
                    <blockquote cite="https://example.com">
                        这是一段引用的内容，通常用于引用他人的话语或文章片段。
                    </blockquote>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;code&gt;</span> 和 <span class="tag-name">&lt;pre&gt;</span></h3>
                <p>代码标签，&lt;code&gt;用于行内代码，&lt;pre&gt;用于预格式化的代码块。</p>
                <pre><code>&lt;p&gt;使用 &lt;code&gt;console.log()&lt;/code&gt; 输出信息到控制台&lt;/p&gt;
&lt;pre&gt;
function hello() {
    console.log("Hello, world!");
}
&lt;/pre&gt;</code></pre>
                <div class="example-output">
                    <p>使用 <code>console.log()</code> 输出信息到控制台</p>
                    <pre>
function hello() {
    console.log("Hello, world!");
}</pre>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;sup&gt;</span> 和 <span class="tag-name">&lt;sub&gt;</span></h3>
                <p>上标和下标标签，用于表示数学公式或脚注。</p>
                <pre><code>&lt;p&gt;H&lt;sub&gt;2&lt;/sub&gt;O 和 E = mc&lt;sup&gt;2&lt;/sup&gt;&lt;/p&gt;</code></pre>
                <div class="example-output">
                    <p>H<sub>2</sub>O 和 E = mc<sup>2</sup></p>
                </div>
            </div>
        </section>

        <section id="link-tags">
            <h2>链接与导航标签</h2>
            <p>用于创建链接和导航菜单。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;a&gt;</span></h3>
                <p>锚标签，用于创建超链接。</p>
                <pre><code>&lt;a href="https://www.example.com" target="_blank"&gt;访问示例网站&lt;/a&gt;
&lt;a href="#section-1"&gt;跳转到页面内的指定部分&lt;/a&gt;</code></pre>
                <div class="example-output">
                    <a href="https://www.example.com" target="_blank">访问示例网站</a><br>
                    <a href="#section-1">跳转到页面内的指定部分</a>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;nav&gt;</span></h3>
                <p>导航标签，用于定义页面的导航区域。</p>
                <pre><code>&lt;nav&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#home"&gt;首页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#about"&gt;关于我们&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;联系方式&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
                <div class="example-output">
                    <nav>
                        <ul>
                            <li><a href="#home">首页</a></li>
                            <li><a href="#about">关于我们</a></li>
                            <li><a href="#contact">联系方式</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </section>

        <section id="list-tags">
            <h2>列表标签</h2>
            <p>用于创建有序和无序列表。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;ul&gt;</span> 和 <span class="tag-name">&lt;li&gt;</span></h3>
                <p>无序列表，用于表示项目之间没有特定顺序的列表。</p>
                <pre><code>&lt;ul&gt;
    &lt;li&gt;苹果&lt;/li&gt;
    &lt;li&gt;香蕉&lt;/li&gt;
    &lt;li&gt;橙子&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                <div class="example-output">
                    <ul>
                        <li>苹果</li>
                        <li>香蕉</li>
                        <li>橙子</li>
                    </ul>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;ol&gt;</span> 和 <span class="tag-name">&lt;li&gt;</span></h3>
                <p>有序列表，用于表示项目之间有特定顺序的列表。</p>
                <pre><code>&lt;ol&gt;
    &lt;li&gt;第一步&lt;/li&gt;
    &lt;li&gt;第二步&lt;/li&gt;
    &lt;li&gt;第三步&lt;/li&gt;
&lt;/ol&gt;

&lt;ol type="A"&gt;
    &lt;li&gt;选项 A&lt;/li&gt;
    &lt;li&gt;选项 B&lt;/li&gt;
    &lt;li&gt;选项 C&lt;/li&gt;
&lt;/ol&gt;</code></pre>
                <div class="example-output">
                    <ol>
                        <li>第一步</li>
                        <li>第二步</li>
                        <li>第三步</li>
                    </ol>

                    <ol type="A">
                        <li>选项 A</li>
                        <li>选项 B</li>
                        <li>选项 C</li>
                    </ol>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;dl&gt;</span>, <span class="tag-name">&lt;dt&gt;</span> 和 <span class="tag-name">&lt;dd&gt;</span></h3>
                <p>描述列表，用于表示术语及其定义的列表。</p>
                <pre><code>&lt;dl&gt;
    &lt;dt&gt;HTML&lt;/dt&gt;
    &lt;dd&gt;超文本标记语言，用于创建网页结构&lt;/dd&gt;
    &lt;dt&gt;CSS&lt;/dt&gt;
    &lt;dd&gt;层叠样式表，用于美化网页外观&lt;/dd&gt;
    &lt;dt&gt;JavaScript&lt;/dt&gt;
    &lt;dd&gt;脚本语言，用于实现网页交互&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
                <div class="example-output">
                    <dl>
                        <dt>HTML</dt>
                        <dd>超文本标记语言，用于创建网页结构</dd>
                        <dt>CSS</dt>
                        <dd>层叠样式表，用于美化网页外观</dd>
                        <dt>JavaScript</dt>
                        <dd>脚本语言，用于实现网页交互</dd>
                    </dl>
                </div>
            </div>
        </section>

        <section id="table-tags">
            <h2>表格标签</h2>
            <p>用于创建和组织表格数据。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;table&gt;</span>, <span class="tag-name">&lt;tr&gt;</span>, <span class="tag-name">&lt;th&gt;</span>, <span class="tag-name">&lt;td&gt;</span></h3>
                <p>表格基本结构，包含表行、表头和表格数据。</p>
                <pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;th&gt;姓名&lt;/th&gt;
        &lt;th&gt;年龄&lt;/th&gt;
        &lt;th&gt;城市&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;张三&lt;/td&gt;
        &lt;td&gt;25&lt;/td&gt;
        &lt;td&gt;北京&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;李四&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
        &lt;td&gt;上海&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
                <div class="example-output">
                    <table>
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>城市</th>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>25</td>
                            <td>北京</td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td>30</td>
                            <td>上海</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;thead&gt;</span>, <span class="tag-name">&lt;tbody&gt;</span>, <span class="tag-name">&lt;tfoot&gt;</span></h3>
                <p>表格结构分区，用于组织表格的表头、表体和表尾。</p>
                <pre><code>&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;产品&lt;/th&gt;
            &lt;th&gt;价格&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;笔记本电脑&lt;/td&gt;
            &lt;td&gt;5999元&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;手机&lt;/td&gt;
            &lt;td&gt;2999元&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
        &lt;tr&gt;
            &lt;td&gt;总计&lt;/td&gt;
            &lt;td&gt;8998元&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
                <div class="example-output">
                    <table>
                        <thead>
                            <tr>
                                <th>产品</th>
                                <th>价格</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>笔记本电脑</td>
                                <td>5999元</td>
                            </tr>
                            <tr>
                                <td>手机</td>
                                <td>2999元</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td>总计</td>
                                <td>8998元</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </section>

        <section id="form-tags">
            <h2>表单标签</h2>
            <p>用于创建用户输入表单。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;form&gt;</span></h3>
                <p>表单标签，用于包裹各种表单元素。</p>
                <pre><code>&lt;form action="/submit" method="post"&gt;
    <!-- 表单元素 -->
&lt;/form&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;input&gt;</span></h3>
                <p>输入框标签，用于接收用户输入，有多种类型。</p>
                <pre><code>&lt;p&gt;
    &lt;label for="username"&gt;用户名：&lt;/label&gt;
    &lt;input type="text" id="username" name="username" placeholder="请输入用户名"&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;label for="password"&gt;密码：&lt;/label&gt;
    &lt;input type="password" id="password" name="password" placeholder="请输入密码"&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;label for="email"&gt;邮箱：&lt;/label&gt;
    &lt;input type="email" id="email" name="email" placeholder="请输入邮箱"&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;label for="age"&gt;年龄：&lt;/label&gt;
    &lt;input type="number" id="age" name="age" min="0" max="120"&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;label&gt;
        &lt;input type="checkbox" name="interests" value="reading"&gt; 阅读
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type="checkbox" name="interests" value="sports"&gt; 运动
    &lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;label&gt;
        &lt;input type="radio" name="gender" value="male"&gt; 男
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type="radio" name="gender" value="female"&gt; 女
    &lt;/label&gt;
&lt;/p&gt;</code></pre>
                <div class="example-output">
                    <p>
                        <label for="username">用户名：</label>
                        <input type="text" id="username" name="username" placeholder="请输入用户名">
                    </p>
                    <p>
                        <label for="password">密码：</label>
                        <input type="password" id="password" name="password" placeholder="请输入密码">
                    </p>
                    <p>
                        <label for="email">邮箱：</label>
                        <input type="email" id="email" name="email" placeholder="请输入邮箱">
                    </p>
                    <p>
                        <label for="age">年龄：</label>
                        <input type="number" id="age" name="age" min="0" max="120">
                    </p>
                    <p>
                        <label>
                            <input type="checkbox" name="interests" value="reading"> 阅读
                        </label>
                        <label>
                            <input type="checkbox" name="interests" value="sports"> 运动
                        </label>
                    </p>
                    <p>
                        <label>
                            <input type="radio" name="gender" value="male"> 男
                        </label>
                        <label>
                            <input type="radio" name="gender" value="female"> 女
                        </label>
                    </p>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;textarea&gt;</span></h3>
                <p>文本域标签，用于多行文本输入。</p>
                <pre><code>&lt;label for="message"&gt;留言：&lt;/label&gt;
&lt;textarea id="message" name="message" rows="4" cols="50" placeholder="请输入留言内容..."&gt;&lt;/textarea&gt;</code></pre>
                <div class="example-output">
                    <label for="message">留言：</label><br>
                    <textarea id="message" name="message" rows="4" cols="50" placeholder="请输入留言内容..."></textarea>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;select&gt;</span> 和 <span class="tag-name">&lt;option&gt;</span></h3>
                <p>下拉列表标签，用于从预设选项中选择。</p>
                <pre><code>&lt;label for="country"&gt;国家：&lt;/label&gt;
&lt;select id="country" name="country"&gt;
    &lt;option value=""&gt;请选择&lt;/option&gt;
    &lt;option value="china" selected&gt;中国&lt;/option&gt;
    &lt;option value="usa"&gt;美国&lt;/option&gt;
    &lt;option value="japan"&gt;日本&lt;/option&gt;
&lt;/select&gt;</code></pre>
                <div class="example-output">
                    <label for="country">国家：</label>
                    <select id="country" name="country">
                        <option value="">请选择</option>
                        <option value="china" selected>中国</option>
                        <option value="usa">美国</option>
                        <option value="japan">日本</option>
                    </select>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;button&gt;</span></h3>
                <p>按钮标签，用于创建可点击的按钮。</p>
                <pre><code>&lt;button type="submit"&gt;提交&lt;/button&gt;
&lt;button type="reset"&gt;重置&lt;/button&gt;
&lt;button type="button"&gt;普通按钮&lt;/button&gt;</code></pre>
                <div class="example-output">
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                    <button type="button">普通按钮</button>
                </div>
            </div>
        </section>

        <section id="media-tags">
            <h2>媒体标签</h2>
            <p>用于嵌入和显示各种媒体内容。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;img&gt;</span></h3>
                <p>图像标签，用于在页面中插入图像。</p>
                <pre><code>&lt;img src="example.jpg" alt="示例图片" width="300" height="200"&gt;</code></pre>
                <div class="example-output">
                    <img src="https://via.placeholder.com/300x200" alt="示例图片" width="300" height="200">
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;audio&gt;</span></h3>
                <p>音频标签，用于在页面中嵌入音频。</p>
                <pre><code>&lt;audio controls&gt;
    &lt;source src="audio.mp3" type="audio/mpeg"&gt;
    您的浏览器不支持音频播放。
&lt;/audio&gt;</code></pre>
                <div class="example-output">
                    <audio controls>
                        <source src="#" type="audio/mpeg">
                        您的浏览器不支持音频播放。
                    </audio>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;video&gt;</span></h3>
                <p>视频标签，用于在页面中嵌入视频。</p>
                <pre><code>&lt;video width="320" height="240" controls&gt;
    &lt;source src="video.mp4" type="video/mp4"&gt;
    您的浏览器不支持视频播放。
&lt;/video&gt;</code></pre>
                <div class="example-output">
                    <video width="320" height="240" controls>
                        <source src="#" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;canvas&gt;</span></h3>
                <p>画布标签，用于通过JavaScript绘制图形。</p>
                <pre><code>&lt;canvas id="myCanvas" width="300" height="200"&gt;&lt;/canvas&gt;
&lt;script&gt;
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#4CAF50';
    ctx.fillRect(50, 50, 200, 100);
&lt;/script&gt;</code></pre>
                <div class="example-output">
                    <canvas id="myCanvas" width="300" height="200"></canvas>
                    <script>
                        const canvas = document.getElementById('myCanvas');
                        const ctx = canvas.getContext('2d');
                        ctx.fillStyle = '#4CAF50';
                        ctx.fillRect(50, 50, 200, 100);
                    </script>
                </div>
            </div>
        </section>

        <section id="semantic-tags">
            <h2>语义化标签</h2>
            <p>这些标签提供了文档结构的语义信息，有助于SEO和可访问性。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;header&gt;</span></h3>
                <p>头部标签，用于表示页面的头部区域。</p>
                <pre><code>&lt;header&gt;
    &lt;h1&gt;网站标题&lt;/h1&gt;
    &lt;nav&gt;
        <!-- 导航菜单 -->
    &lt;/nav&gt;
&lt;/header&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;footer&gt;</span></h3>
                <p>页脚标签，用于表示页面的底部区域。</p>
                <pre><code>&lt;footer&gt;
    &lt;p&gt;© 2023 示例网站. 保留所有权利.&lt;/p&gt;
&lt;/footer&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;main&gt;</span></h3>
                <p>主内容标签，用于表示页面的主要内容区域。</p>
                <pre><code>&lt;main&gt;
    &lt;section&gt;
        <!-- 主要内容 -->
    &lt;/section&gt;
&lt;/main&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;section&gt;</span> 和 <span class="tag-name">&lt;article&gt;</span></h3>
                <p>区块和文章标签，用于组织页面内容。</p>
                <pre><code>&lt;section&gt;
    &lt;h2&gt;新闻版块&lt;/h2&gt;
    &lt;article&gt;
        &lt;h3&gt;新闻标题 1&lt;/h3&gt;
        &lt;p&gt;新闻内容 1...&lt;/p&gt;
    &lt;/article&gt;
    &lt;article&gt;
        &lt;h3&gt;新闻标题 2&lt;/h3&gt;
        &lt;p&gt;新闻内容 2...&lt;/p&gt;
    &lt;/article&gt;
&lt;/section&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;aside&gt;</span></h3>
                <p>侧边栏标签，用于表示页面的侧边栏内容。</p>
                <pre><code>&lt;aside&gt;
    &lt;h3&gt;相关链接&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;链接 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;链接 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/aside&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;figure&gt;</span> 和 <span class="tag-name">&lt;figcaption&gt;</span></h3>
                <p>图像和图表标签，用于表示自包含的内容，如图片和说明。</p>
                <pre><code>&lt;figure&gt;
    &lt;img src="example.jpg" alt="示例图片"&gt;
    &lt;figcaption&gt;这是图片的说明文字&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
                <div class="example-output">
                    <figure>
                        <img src="https://via.placeholder.com/300x200" alt="示例图片">
                        <figcaption>这是图片的说明文字</figcaption>
                    </figure>
                </div>
            </div>
        </section>

        <section id="embedded-tags">
            <h2>内嵌内容标签</h2>
            <p>用于在页面中嵌入外部内容。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;iframe&gt;</span></h3>
                <p>内联框架标签，用于在当前页面中嵌入另一个HTML页面。</p>
                <pre><code>&lt;iframe src="https://www.example.com" width="600" height="400" title="示例页面"&gt;&lt;/iframe&gt;</code></pre>
                <div class="example-output">
                    <iframe src="https://www.example.com" width="600" height="400" title="示例页面"></iframe>
                </div>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;embed&gt;</span></h3>
                <p>嵌入标签，用于嵌入各种类型的外部内容。</p>
                <pre><code>&lt;embed type="image/svg+xml" src="image.svg" width="300" height="200"&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;object&gt;</span></h3>
                <p>对象标签，用于嵌入一个对象，如Flash动画、PDF文档等。</p>
                <pre><code>&lt;object data="document.pdf" type="application/pdf" width="600" height="400"&gt;
    &lt;p&gt;您的浏览器不支持PDF查看。&lt;a href="document.pdf"&gt;下载PDF&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;</code></pre>
            </div>
        </section>

        <section id="meta-tags">
            <h2>元信息标签</h2>
            <p>用于提供关于HTML文档的元数据。</p>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;meta&gt;</span></h3>
                <p>元标签，用于设置文档的字符集、视口、关键词等信息。</p>
                <pre><code>&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;meta name="description" content="这是页面的描述信息"&gt;
&lt;meta name="keywords" content="HTML, CSS, JavaScript"&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;title&gt;</span></h3>
                <p>标题标签，用于设置浏览器标签页的标题。</p>
                <pre><code>&lt;title&gt;页面标题&lt;/title&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;link&gt;</span></h3>
                <p>链接标签，用于链接外部资源，如CSS文件、图标等。</p>
                <pre><code>&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;link rel="icon" href="favicon.ico" type="image/x-icon"&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;style&gt;</span></h3>
                <p>样式标签，用于在HTML文档中嵌入CSS样式。</p>
                <pre><code>&lt;style&gt;
    body {
        font-family: Arial, sans-serif;
        color: #333;
    }
    h1 {
        color: #4CAF50;
    }
&lt;/style&gt;</code></pre>
            </div>

            <div class="tag-example">
                <h3><span class="tag-name">&lt;script&gt;</span></h3>
                <p>脚本标签，用于在HTML文档中嵌入JavaScript代码或引用外部JavaScript文件。</p>
                <pre><code>&lt;script src="script.js"&gt;&lt;/script&gt;
&lt;script&gt;
    function hello() {
        console.log("Hello, world!");
    }
&lt;/script&gt;</code></pre>
            </div>
        </section>
    </div>

    <a href="#" class="back-to-top">↑</a>

    <script>
        // 返回顶部按钮功能
        document.querySelector('.back-to-top').addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    </script>
</body>
</html>
